<template>
  <!-- 号码状态分布图 -->
  <div id="number">
    <div id="numberGraph" style="width:1200px;height:700px"></div>
  </div>
  <!-- 对话时长分布图 -->
  <div id="time">
    <div id="timeGraph" style="width:1200px;height:300px"></div>
  </div>
  <!-- 对话轮次分布图 -->
  <div id="dialogue">
    <div id="dialogueGraph" style="width:1200px;height:400px"></div>
  </div>
  <!-- 短信点击跟踪图-->
  <div id="message">
    <div id="messageGraph" style="width:1200px;height:300px"></div>
  </div>
  <!-- 外呼到达统计 -->
  <div id="arrive">
    <div id="pieGraph" style="width:600px;height:300px;float:left"></div>
    <div id="pie2Graph" style="width:600px;height:300px;float:right"></div>
    <div id="arriveGraph" style="width:1200px;height:800px"></div>
  </div>
  <!-- 意向分布图 -->
  <div id="intent">
    <div id="intentGraph" style="width:1200px;height:500px"></div>
    <!-- 相关意向分布 -->
    <div style="text-align: -webkit-center">
      意向标签：
      <el-button-group @click="search_yxbq($event)">
        <el-button>A</el-button>
        <el-button>B</el-button>
        <el-button>C</el-button>
        <el-button>D</el-button>
        <el-button>E</el-button>
        <el-button>F</el-button>
        <el-button>G</el-button>
        <el-button>H</el-button>
      </el-button-group>
    </div>
    <div id="routeGraph" style="width:1200px;height:400px"></div>
  </div>
  <!-- 标签采集表 -->
  <pro-table
    title="标签采集表"
    :request="getLabel"
    :columns="columns"
    :pagination="pagination"
  ></pro-table>
</template>

<script>
import * as API from '@/api/overview'
import * as echarts from 'echarts'
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  data() {
    return {
      f_gsid: '',
      // 指定图表配置
      numberoption: {
        title: [
          {
            text: '外呼状态分布',
          },
          {
            left: 'right',
            subtext: '',
            subtextStyle: {
              fontSize: 18,
            },
          },
        ],
        grid: {
          x: '12%',
          y: '10%',
          x2: '10%',
          y2: '10%',
        },
        tooltip: {
          show: false,
          trigger: 'axis',
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: { show: true },
          axisTick: {
            show: false,
          },
          data: [
            '拒接',
            '占线',
            '停机',
            '改号',
            '关机',
            '人工接听',
            '呼叫失败',
            '线路故障',
            '用户欠费',
            '未接',
            '空号',
            '已接通',
          ],
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: 20,
            zlevel: 2,
            label: {
              show: true,
              position: 'inside',
              align: 'center',
              formatter: {},
              color: '#fff',
              fontSize: 12,
            },
            itemStyle: {
              borderRadius: 10,
            },
          },
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [],
            label: {
              show: true,
              position: 'right',
              distance: 80,
              align: 'right',
              formatter: {},
              fontSize: 18,
            },
            itemStyle: {
              borderRadius: 10,
              color: 'rgba(223,223,223,1)',
            },
          },
        ],
      },
      timeoption: {
        title: [
          {
            text: '对话时长分布',
          },
          {
            left: 'right',
            subtext: '',
            subtextStyle: {
              fontSize: 18,
            },
          },
        ],
        grid: {
          x: '12%',
          y: '10%',
          x2: '6%',
          y2: '10%',
        },
        tooltip: {
          show: false,
          trigger: 'axis',
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: { show: true },
          axisTick: {
            show: false,
          },
          data: ['1分钟以上', '30秒-1分钟', '10-30秒', '0-10秒'],
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: 20,
            zlevel: 2,
            label: {
              show: true,
              position: 'inside',
              align: 'center',
              formatter: {},
              color: '#fff',
              fontSize: 12,
            },
            itemStyle: {
              borderRadius: 10,
            },
          },
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [],
            label: {
              show: true,
              position: 'right',
              distance: 80,
              align: 'right',
              formatter: {},
              fontSize: 18,
            },
            itemStyle: {
              borderRadius: 10,
              color: 'rgba(223,223,223,1)',
            },
          },
        ],
      },
      dialogueoption: {
        title: [
          {
            text: '对话轮次分布',
          },
          {
            left: 'right',
            subtext: '',
            subtextStyle: {
              fontSize: 18,
            },
          },
        ],
        grid: {
          x: '12%',
          y: '10%',
          x2: '6%',
          y2: '10%',
        },
        tooltip: {
          show: false,
          trigger: 'axis',
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: { show: true },
          axisTick: {
            show: false,
          },
          data: ['10次以上', '7-9次', '5-6次', '3-4次', '1-2次', '0次'],
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: 20,
            zlevel: 2,
            label: {
              show: true,
              position: 'inside',
              align: 'center',
              formatter: {},
              color: '#fff',
              fontSize: 12,
            },
            itemStyle: {
              borderRadius: 10,
            },
          },
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [],
            label: {
              show: true,
              position: 'right',
              distance: 80,
              align: 'right',
              formatter: {},
              fontSize: 18,
            },
            itemStyle: {
              borderRadius: 10,
              color: 'rgba(223,223,223,1)',
            },
          },
        ],
      },
      messageoption: {
        title: [
          {
            text: '短信点击跟踪',
          },
        ],
        grid: {
          x: '12%',
          y: '10%',
          x2: '14%',
          y2: '10%',
        },
        tooltip: {
          show: false,
          trigger: 'axis',
        },
        xAxis: {
          show: false,
          type: 'value',
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value} %',
          },
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: { show: true },
          axisTick: {
            show: false,
          },
          data: [
            '短信短链发送成功/总数',
            '短链发送成功/总数',
            '短信发送成功/总数',
          ],
        },
        series: [
          {
            name: '发送成功',
            data: [],
            type: 'bar',
            barWidth: 20,
            zlevel: 2,
            label: {
              show: true,
              position: 'inside',
              align: 'center',
              formatter: {},
              color: '#fff',
              fontSize: 12,
            },
            itemStyle: {
              borderRadius: 10,
            },
          },
          {
            name: '总数',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [],
            label: {
              show: true,
              position: 'right',
              distance: 80,
              align: 'right',
              formatter: {},
              fontSize: 18,
            },
            itemStyle: {
              borderRadius: 10,
              color: 'rgba(223,223,223,1)',
            },
          },
        ],
      },
      arriveoption: {
        title: [
          {
            text: '外呼到达统计',
          },
        ],
        grid: {
          top: '50%',
          bottom: '10%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        legend: {
          data: [
            '已完成外呼数',
            '接听',
            'A,B类意向客户',
            '短信发送数',
            '接通占比',
            'A,B类意向占比',
          ],
          bottom: 20,
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
            },
            name: '接通数',
            axisLabel: {
              formatter: '{value} 通',
            },
          },
          {
            type: 'value',
            axisLine: {
              show: true,
            },
            name: '占比',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        series: [
          {
            name: '已完成外呼数',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 通'
              },
            },
            data: [],
          },
          {
            name: '接听',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 通'
              },
            },
            data: [],
          },
          {
            name: 'A,B类意向客户',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 通'
              },
            },
            data: [],
          },
          {
            name: '短信发送数',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 通'
              },
            },
            data: [],
          },
          {
            name: '接通占比',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              },
            },
            data: [],
          },
          {
            name: 'A,B类意向占比',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              },
            },
            data: [],
          },
        ],
      },
      pieoption: {
        title: [
          {
            text: '',
            left: '55%',
            top: 'center',
            textStyle: {
              fontSize: 24,
              foontWeight: '600',
            },
          },
          {
            text: '电话接听占比',
            left: '50%',
            bottom: '0',
          },
        ],
        polar: {
          //极坐标系地底板，类似于grid
          radius: ['60%', '80%'],
          center: ['60%', '50%'],
        },
        angleAxis: {
          //角度轴，一个圆圈
          max: 100,
          show: true,
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          //径向轴，一段线段，type:'category'类目轴，类似的x轴的类目轴
          type: 'category',
          show: true,
          axisLabel: {
            show: true,
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            name: '电话接听占比',
            type: 'bar', //柱状图
            roundCap: true,
            barWidth: 90,
            showBackground: true,
            data: [],
            coordinateSystem: 'polar', //采用极坐标系
          },
        ],
      },
      pie2option: {
        title: [
          {
            text: '',
            left: '25%',
            top: 'center',
            textStyle: {
              fontSize: 24,
              foontWeight: '600',
            },
          },
          {
            text: 'A、B意向用户占比',
            left: '15%',
            bottom: '0',
          },
        ],
        polar: {
          //极坐标系地底板，类似于grid
          radius: ['60%', '80%'],
          center: ['30%', '50%'],
        },
        angleAxis: {
          //角度轴，一个圆圈
          max: 100,
          show: true,
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          //径向轴，一段线段，type:'category'类目轴，类似的x轴的类目轴
          type: 'category',
          show: true,
          axisLabel: {
            show: true,
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        series: [
          {
            name: 'A、B意向用户占比',
            type: 'bar', //柱状图
            roundCap: true,
            barWidth: 90,
            showBackground: true,
            data: [],
            coordinateSystem: 'polar', //采用极坐标系
          },
        ],
      },
      intentoption: {
        title: [
          {
            text: '意向分布',
          },
          {
            left: 'right',
            subtext: '',
            subtextStyle: {
              fontSize: 18,
            },
          },
        ],
        grid: {
          x: '12%',
          y: '10%',
          x2: '7%',
          y2: '10%',
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        xAxis: {
          show: false,
          type: 'value',
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: { show: false },
          axisTick: {
            show: false,
          },
          data: [
            'H(未接通(黑名单/空号/停机))',
            'G(未接通(用户欠费/不可用/线路故障/呼叫失败/改号))',
            'F(未接通(占线/未接/拒接/关机/无法接通))',
            'E(明确原因拒绝)',
            'D(未明确意愿)',
            'C(有意思未明确尝试)',
            'B(要尝试遇到问题)',
            'A(没问题会尝试)',
          ],
        },
        series: [
          {
            name: '发送成功',
            data: [],
            type: 'bar',
            barWidth: 20,
            zlevel: 2,
            label: {
              show: true,
              formatter: '{b}',
              position: 'left',
              align: 'left',
              offset: [10, -20],
            },
            itemStyle: {
              borderRadius: 10,
            },
          },
          {
            name: '总数',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [],
            label: {
              show: true,
              position: 'right',
              distance: 80,
              align: 'right',
              formatter: {},
              fontSize: 18,
            },
            itemStyle: {
              borderRadius: 10,
              color: 'rgba(223,223,223,1)',
            },
          },
        ],
      },
      routeoption: {
        title: {
          text: '相关意向分布',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          bottom: '30',
          data: ['线路A', '线路B', '线路C', '线路D'],
        },
        grid: {
          left: '6%',
          right: '10%',
          bottom: '20%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
          },
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value} %',
          },
        },
        series: [
          {
            name: '线路A',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              },
            },
            data: [],
            smooth: true,
          },
          {
            name: '线路B',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              },
            },
            data: [],
            smooth: true,
          },
          {
            name: '线路C',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              },
            },
            data: [],
            smooth: true,
          },
          {
            name: '线路D',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              },
            },
            data: [],
            smooth: true,
          },
        ],
      },
    }
  },
  methods: {
    //根据公司id所选择的意向标签，输出对应的图
    //点击相关按钮执行对应查询图
    search_yxbq(e) {
      var f_yxbq = ''
      if (e.target.textContent == 'A') {
        f_yxbq = 'A'
      } else if (e.target.textContent == 'B') {
        f_yxbq = 'B'
      } else if (e.target.textContent == 'C') {
        f_yxbq = 'C'
      } else if (e.target.textContent == 'D') {
        f_yxbq = 'D'
      } else if (e.target.textContent == 'E') {
        f_yxbq = 'E'
      } else if (e.target.textContent == 'F') {
        f_yxbq = 'F'
      } else if (e.target.textContent == 'G') {
        f_yxbq = 'G'
      } else if (e.target.textContent == 'H') {
        f_yxbq = 'H'
      }
      var routeChart = echarts.init(document.getElementById('routeGraph'))
      API.getRouteNum({ F_YXBQ: f_yxbq }).then(res => {
        //清除上一次数据
        for (var j = 0; j < 4; j++) {
          this.routeoption.series[j].data = []
        }
        this.routeoption.xAxis.data = []
        //重新绘图
        for (var i = 0; i < res.data.length; i++) {
          this.routeoption.series[0].data.push(
            100 * (res.data[i].firstRoute / res.data[i].allRoute).toFixed(2)
          )
          this.routeoption.series[1].data.push(
            100 * (res.data[i].secondRoute / res.data[i].allRoute).toFixed(2)
          )
          this.routeoption.series[2].data.push(
            100 * (res.data[i].thirdRoute / res.data[i].allRoute).toFixed(2)
          )
          this.routeoption.series[3].data.push(
            100 * (res.data[i].fourthRoute / res.data[i].allRoute).toFixed(2)
          )
          this.routeoption.xAxis.data.push(res.data[i].time)
        }
        routeChart.setOption(this.routeoption)
      })
    },
  },
  mounted: function() {
    // 初始化绘制图表的echarts实例
    var numberChart = echarts.init(document.getElementById('numberGraph'))
    var timeChart = echarts.init(document.getElementById('timeGraph'))
    var dialogueChart = echarts.init(document.getElementById('dialogueGraph'))
    var messageChart = echarts.init(document.getElementById('messageGraph'))
    var arriveChart = echarts.init(document.getElementById('arriveGraph'))
    var pieChart = echarts.init(document.getElementById('pieGraph'))
    var pie2Chart = echarts.init(document.getElementById('pie2Graph'))
    var intentChart = echarts.init(document.getElementById('intentGraph'))
    var routeChart = echarts.init(document.getElementById('routeGraph'))
    //号码状态分布
    API.getServiceNum({}).then(res => {
      //储存各项数据
      var numberdata = []
      //未接通总和
      var sum = 0
      for (var i = 3; i < res.data.length; i++) {
        this.numberoption.series[0].data.push(res.data[i])
        numberdata.push(res.data[i])
        sum = sum + res.data[i]
      }
      numberdata.push(res.data[0] + res.data[1] + res.data[2])
      //外呼总数
      var all = sum + res.data[0] + res.data[1] + res.data[2]
      //AI呼出+人工坐席+语音通知已接通
      this.numberoption.series[0].data.push(
        res.data[0] + res.data[1] + res.data[2]
      )
      //背景
      this.numberoption.series[1].data = res.data.map(function(item) {
        return {
          realValue: item, // 真实的柱条数据，即标签显示的数据
          value: all, // 所有服务类型个数的最大值
        }
      })
      //统计各项的百分比
      this.numberoption.series[1].label.formatter = function(params) {
        let num = numberdata[params.dataIndex] / all
        num = (num * 100).toFixed(2)
        return num + '%'
      }
      this.numberoption.title[1].subtext = '外呼总数:' + all
      numberChart.setOption(this.numberoption)
    })
    //获取时间差
    API.getTimeCut({}).then(res => {
      //储存时间差
      var timedata = [
        res.data[0].more,
        res.data[0].sixty,
        res.data[0].thirty,
        res.data[0].ten,
      ]
      var sum =
        res.data[0].ten +
        res.data[0].thirty +
        res.data[0].sixty +
        res.data[0].more
      for (var i = 0; i < 4; i++) {
        this.timeoption.series[0].data.push(timedata[i])
        this.timeoption.series[1].data.push(sum)
      }
      this.timeoption.series[1].label.formatter = function(params) {
        let num = timedata[params.dataIndex] / sum
        num = (num * 100).toFixed(2)
        return num + '%'
      }
      this.timeoption.title[1].subtext = '接听总数:' + sum
      timeChart.setOption(this.timeoption)
    })
    //获取对话轮次
    API.getDiaNum({}).then(res => {
      //储存对话轮次
      var diadata = [
        res.data[0].diaMore,
        res.data[0].nine,
        res.data[0].six,
        res.data[0].four,
        res.data[0].two,
        res.data[0].zero,
      ]
      //计算对话轮次总和
      var sum =
        res.data[0].zero +
        res.data[0].two +
        res.data[0].four +
        res.data[0].six +
        res.data[0].nine +
        res.data[0].diaMore
      for (var i = 0; i < 6; i++) {
        this.dialogueoption.series[0].data.push(diadata[i])
        this.dialogueoption.series[1].data.push(sum)
      }
      this.dialogueoption.series[1].label.formatter = function(params) {
        let num = diadata[params.dataIndex] / sum
        num = (num * 100).toFixed(2)
        return num + '%'
      }
      this.dialogueoption.title[1].subtext = '接听总数:' + sum
      dialogueChart.setOption(this.dialogueoption)
    })
    //获取短信短链数据
    API.getMessageNum({}).then(res => {
      //储存短信短链
      var MCSucdata = [res.data[0].mcsuc, res.data[0].csuc, res.data[0].msuc]
      var MCNumdata = [res.data[0].mcnum, res.data[0].cnum, res.data[0].mnum]
      for (var i = 0; i < 3; i++) {
        this.messageoption.series[0].data.push(
          (MCSucdata[i] * 100) / MCNumdata[i]
        )
        this.messageoption.series[1].data.push(100)
      }
      //表示发送成功数
      this.messageoption.series[0].label.formatter = function(params) {
        let sucnum = MCSucdata[params.dataIndex]
        return sucnum + ' 条'
      }
      //表示百分比数
      this.messageoption.series[1].label.formatter = function(params) {
        let num = (
          (MCSucdata[params.dataIndex] / MCNumdata[params.dataIndex]) *
          100
        ).toFixed(2)
        let all = MCNumdata[params.dataIndex]
        return all + ' 条\n' + num + ' %'
      }
      messageChart.setOption(this.messageoption)
    })
    //获取外呼到达统计
    API.getArriveNum({}).then(res => {
      //横坐标
      for (var i = res.data.length - 5; i < res.data.length; i++) {
        this.arriveoption.xAxis[0].data.push(res.data[i].time)
      }
      //传入值
      //固定显示后5个日期
      for (var j = res.data.length - 5; j < res.data.length; j++) {
        this.arriveoption.series[0].data.push(res.data[j].callNum)
        this.arriveoption.series[1].data.push(res.data[j].answerNum)
        this.arriveoption.series[2].data.push(res.data[j].abnum)
        this.arriveoption.series[3].data.push(res.data[j].messageNum)
        //当总额为0时，tooltip中显示0而不是NaN
        if (res.data[j].callNum != 0) {
          this.arriveoption.series[4].data.push(
            ((100 * res.data[j].answerNum) / res.data[j].callNum).toFixed(2)
          )
          this.arriveoption.series[5].data.push(
            ((100 * res.data[j].abnum) / res.data[j].callNum).toFixed(2)
          )
        } else {
          this.arriveoption.series[4].data.push('0')
          this.arriveoption.series[5].data.push('0')
        }
      }
      //计算电话接听占比
      //计算A、B意向用户占比
      var callnum = 0
      var answernum = 0
      var abnum = 0
      for (var z = 0; z < res.data.length; z++) {
        callnum += res.data[z].callNum
        answernum += res.data[z].answerNum
        abnum += res.data[z].abnum
      }
      this.pieoption.series[0].data.push(
        Math.round((100 * answernum) / callnum)
      )
      this.pieoption.title[0].text =
        Math.round((100 * answernum) / callnum) + ' %\n' + callnum + ' 通'
      this.pie2option.series[0].data.push(Math.round((100 * abnum) / callnum))
      this.pie2option.title[0].text =
        Math.round((100 * abnum) / callnum) + ' %\n' + callnum + ' 通'
      arriveChart.setOption(this.arriveoption)
      pieChart.setOption(this.pieoption)
      pie2Chart.setOption(this.pie2option)
    })
    //获取意向分布数据
    API.getIntentNum({}).then(res => {
      var intentdata = [
        res.data[0].hnum,
        res.data[0].gnum,
        res.data[0].fnum,
        res.data[0].enum,
        res.data[0].dnum,
        res.data[0].cnum,
        res.data[0].bnum,
        res.data[0].anum,
      ]
      for (var i = 0; i < 8; i++) {
        this.intentoption.series[0].data.push(intentdata[i])
        this.intentoption.series[1].data.push(res.data[0].allNum)
      }
      this.intentoption.series[1].label.formatter = function(params) {
        let num = intentdata[params.dataIndex] / res.data[0].allNum
        num = (num * 100).toFixed(2)
        return num + '%'
      }
      this.intentoption.title[1].subtext = '意向总数:' + res.data[0].allNum
      intentChart.setOption(this.intentoption)
    })
    API.getRouteNum({}).then(res => {
      for (var i = 0; i < res.data.length; i++) {
        this.routeoption.series[0].data.push(
          100 * (res.data[i].firstRoute / res.data[i].allRoute).toFixed(2)
        )
        this.routeoption.series[1].data.push(
          100 * (res.data[i].secondRoute / res.data[i].allRoute).toFixed(2)
        )
        this.routeoption.series[2].data.push(
          100 * (res.data[i].thirdRoute / res.data[i].allRoute).toFixed(2)
        )
        this.routeoption.series[3].data.push(
          100 * (res.data[i].fourthRoute / res.data[i].allRoute).toFixed(2)
        )
        this.routeoption.xAxis.data.push(res.data[i].time)
      }
      routeChart.setOption(this.routeoption)
    })
  },
  watch: {
    numberoption: function() {
      var numberChart = echarts.init(document.getElementById('numberGraph'))
      numberChart.setOption(this.numberoption)
    },
    timeoption: function() {
      var timeChart = echarts.init(document.getElementById('timeGraph'))
      timeChart.setOption(this.timeoption)
    },
    dialogueoption: function() {
      var dialogueChart = echarts.init(document.getElementById('dialogueGraph'))
      dialogueChart.setOption(this.dialogueoption)
    },
    messageoption: function() {
      var messageChart = echarts.init(document.getElementById('messageGraph'))
      messageChart.setOption(this.messageoption)
    },
    arriveoption: function() {
      var arriveChart = echarts.init(document.getElementById('arriveGraph'))
      arriveChart.setOption(this.arriveoption)
    },
    pieoption: function() {
      var pieChart = echarts.init(document.getElementById('pieGraph'))
      pieChart.setOption(this.pieoption)
    },
    pie2option: function() {
      var pie2Chart = echarts.init(document.getElementById('pie2Graph'))
      pie2Chart.setOption(this.pie2option)
    },
    intentoption: function() {
      var intentChart = echarts.init(document.getElementById('intentGraph'))
      intentChart.setOption(this.intentoption)
    },
    routeoption: function() {
      var routeChart = echarts.init(document.getElementById('routeGraph'))
      routeChart.setOption(this.routeoption)
    },
  },
  setup() {
    const state = reactive({
      columns: [
        {
          label: '外呼状态',
          prop: 'rwzt',
        },
        {
          label: '外呼网关',
          prop: 'whwg',
        },
        {
          label: '开始通话时间',
          prop: 'rwqssj',
        },
        {
          label: '通话时长',
          prop: 'thsc',
        },
        {
          label: '对话轮次',
          prop: 'dhlc',
        },
        {
          label: '意向标签',
          prop: 'yxbq',
        },
        {
          label: '回复关键词',
          prop: 'hfgjc',
        },
      ],
      // search: {
      //   labelWidth: '80px',
      //   inputWidth: '320px',
      //   fields: [
      //     {
      //       label: '查询公司id',
      //       type: 'text',
      //       name: 'F_GSID',
      //     },
      //   ],
      // },
      pagination: {
        layout: 'total, prev, pager, next, sizes', // 分页组件显示哪些功能
        pageSize: 10, // 每页条数
        pageSizes: [5, 10, 20, 50],
      },
    })

    //获取服务类型表的数据
    const getLabel = async params => {
      const { data, total } = await API.getLabel({ params })

      return {
        data: data,
        total: total,
      }
    }

    return {
      ...toRefs(state),
      getLabel,
    }
  },
})
</script>